/*
 * @Description: 
 * @version: 1.0
 * @Author: 赵卓轩
 * @Date: 2021-10-26 22:19:41
 * @LastEditors: 赵卓轩
 * @LastEditTime: 2021-10-26 23:49:12
 */
import React, { useEffect } from "react";
import { Avatar, Button, Card, Image, Tabs } from "antd";
import style from './index.css';
import { UserOutlined } from "@ant-design/icons";
import Info from '../components/info/index';

const { TabPane } = Tabs;

export default () => {

    useEffect(() => {
        let params = window.location.search;
        let id = params.split('=')[1];
        console.log(id);  
    },[])

    function callback(key: any) {
        console.log(key);
      }

    return (
        <div className={style.container}>
            <div className={style.header}>
                <Image
                    width='100%'
                    height={250}
                    src="https://pic2.zhimg.com/80/v2-578a74d70996335d06f1486df0fe06ab_r.jpg"
                />
                <div className={style.info}>
                    <Info />
                </div>
                <div className={style.avatar}>
                    <Avatar shape="square" size={100} icon={<UserOutlined />} />
                </div>
                <div className={style.btn}>
                    <Button type="primary" ghost>
                        编辑资料
                    </Button>
                </div>
            </div>
            <div className={style.content}>
                <Card style={{ width: '69%' }}>
                    <Tabs defaultActiveKey="1" onChange={callback}>
                        <TabPane tab="Tab 1" key="1">
                            Content of Tab Pane 1
                        </TabPane>
                        <TabPane tab="Tab 2" key="2">
                            Content of Tab Pane 2
                        </TabPane>
                        <TabPane tab="Tab 3" key="3">
                            Content of Tab Pane 3
                        </TabPane>
                    </Tabs>
                </Card>
                <Card style={{ width: '30%' }}>2</Card>
            </div>
        </div>
    )
}